<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <meta http-equiv="Window-target" content="_top">
		<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-title" content="标题"/>
		<link rel="apple-touch-icon-precomposed" href="png"/>
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="png"/>
		<script src="../js/flexible.debug.js"></script>
		<script src="../js/flexible_css.debug.js"></script>
    
    
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2kv6xApA9npTfhbH7djd85Uu7zzNUvmV"></script>
  </head>
  <style>
  header{
  		display: flex;
  		 height: 88px;
  		 padding-left: 2%;
  		align-items: center;
  		background: #27c1b4;
  		justify-content: space-between;
	  	.leftReturn{
	  		padding-left: 20px;
	  	}
	  	.center{
	  		
	  		
	  	}
  	}
  </style>
  
  <body>
    <!--百度地图容器-->
    <!--<header>
    	
    
	    <p class="leftReturn">
	    	 <img src="../img/fanhui.png" />
	    </p>
	    <p class="center" style="color: #FFFFFF; font-size: 30px;">海乘参考地图</p>
	    <p></p>
    </header>-->
    <div style="width:750px;height:1230px;border:#ccc solid 1px;font-size:12px" id="map"></div>
    
  </body>
  <script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript">
			$(function  () {
				$('.leftReturn').click(function  () {
			        history.back();
				})
			})
		</script>
		<script>
		//   实例化一个ajax原声核心对象
//			  var xhr = new XMLHttpRequest();
//			 Ajax在我们这个工作过程中的  他主要是处理异步提交来的数据的，也可以说是 异步请求     AJAX常用的是原生AJAX 库当中的AJAX。那么在原生AJAX一般分这么几部  1.创建AJAX这一个对象 当然创建这个对象就要有兼容  IE和火狐谷歌不一样 一个是HTTPR  一个是ACI….      第二步 创建完成之后 我们需要建立一个链接 
//			 xhr.open("get",url,true)
//			 有一个open 方法  可以指定get 或者 post 然后那写一个链接的地址  链接的地址可以是外网的 可以是本地的 第三部的话  建立玩了以后   我们建立起了链接 链接收到我们的请求 
//			 xhr.onreadystatechange = function(){
//			 	   if(xhr.status==4&& xhr.readyState==200){
//			 	   	  5个值 0  1  2  3  4  0表示的是连接成功  4表示的是执行完成 那么中间的123都表示出了问题了   如果rady等于4那么AJAX请求完成 还有一个事  执行完成不代表执行成功 还有一个值是status   =200 是执行 完成  在这里面有可能出现的错误是404 就是找不到请求地址这样一个错误 也有可能出现 400或者相应的这么一个请求的错误 这都是有可能出现的
//			 	   	  xhr.responseText
//			 	   }
//			 }
//			 xhr.send(null)
//			 他那边已经开始执行了 我们同时要有一个监听的这样一个事件叫 onreadystatuschange  这个监听的过程中那边开始正常的执行 我就是监督你看你干不干活  在这个监督的过程中有两个状态值  第一个叫做ready    那么请求完成之后呢 他会传回来一个数据 那么这个数据回来 一般咱们都是一个JSON数据  这个JSOn数据我们一般放在（）   然后我把这个json数据回来 他是一个json字符串  要把他转成一个json对象 json.tostring   还可以用eval函数都可以转成json 对象 转成json对象以后呢 那这个json对象可以遍历到我们下面的节点当中去了 这是原生JS里面 当然 jQuery里面  后来这个原生JS里面不是操作挺麻烦呢 所以呢有人就把原生JS封装到这个jQuery库里面了  封装到jQuery库里面  那操作起来就简单了 里面有  URL datatype了 data了 success了 用起来就比较简单了   这是AJAX一个描述
//			
			
			
			
		</script>
  <script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
     var map;
    initMap();
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point(116.582098,39.836481),11);
    }
    
    
    
//  function setMapEvent(){
//    map.enableScrollWheelZoom();
//    map.enableKeyboard();
//    map.enableDragging();
//    map.enableDoubleClickZoom()
//  }
//  function addClickHandler(target,window){
//    target.addEventListener("click",function(){
//      target.openInfoWindow(window);
//    });
//  }
//  function addMapOverlay(){
//  }
    //向地图添加控件
//  function addMapControl(){
//    var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
//    scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
//    map.addControl(scaleControl);
//    var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
//    map.addControl(navControl);
//    var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
//    map.addControl(overviewControl);
//  }
 
  </script>
  
</html>